<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素类名的切换</title>
</head>
<body>
    <div class="bc1 bc2" id="bcid">
        不要学编程
    </div>
    <script type="text/javascript">
        var a = document.getElementById('bcid');
        document.write('<p style="color:red">toggle 添加或删除：<br></p>')
        document.write('<p style="color:red">toggle 的用法一：<br>语法：元素.classList.toggle("类名")<br></p>')
        document.write('<p style="color:red">作用一：当元素中有这个类名时，toggle 则删除这个类。<br></p>')
        a.classList.toggle('bc2');
        document.write('<p style="color:red">作用二：当元素中没有这个类名时，toggle 则添加这个类。<br></p>')
        a.classList.toggle('bc2');
        document.write('<p style="color:red">toggle 强制添加或删除：<br></p>')
        document.write('<p style="color:red">toggle 用法二：<br>语法：元素.classList.toggle("类名",布尔值)<br></p>')
        document.write('<p style="color:red">作用一：第二个参数为true 时，执行强制添加。<br></p>')
        a.classList.toggle('bc3',true);
        document.write('<p style="color:red">作用一：第二个参数为false 时，执行强制删除。<br></p>')
        a.classList.toggle('bc3',false);
        document.write('<p>toggle 切换类名：</p>')
    </script>
</body>
</html>